<template>
	<view>
		<view class="uni-status-bar" style="background:#fff"></view>
		<view class="fixed">
			<view class="overview">
				<view class="bg_tab1">
					<view class="tabCoin">
						<view class="item active">BTC</view>
					</view>
				</view>
			</view>
			<!-- 立即收益记录/线性发放记录 -->
			<view class="tab flexSpace" style="margin-top:40rpx;">
				<view class="item" :class="tabIndex == 0 ?'active':''" @click="onTab(0)">
					<image src="~@/static/icon/profitIcon.png" mode="" class="flexIconSmall"></image>
					<text v-if="coin == 'FIL'">{{$t('profit.revenueRecord1')}}</text> 
					<text v-else>{{$t('profit.revenueRecord')}}</text> 
				</view>
			</view>
			<view v-if="tabIndex == 0">
				<view class="header-th record">
					<text class="header-th-title">{{$t('profit.date')}}</text>
					<text class="header-th-title" v-if="form.status == 0">{{$t('profit.dayEffective')}}</text>
					<text class="header-th-title" v-if="form.status == 1">{{$t('profit.weekEffective')}}</text>
					<text class="header-th-title" v-if="form.status == 2">{{$t('profit.monthEffective')}}</text>
					<text class="header-th-title">{{$t('profit.title')}}</text>
					<text class="header-th-title">{{$t('profit.remarks')}}</text>
				</view>
			</view>
			<view v-if="tabIndex == 1">
				<view class="header-th record1">
					<text class="header-th-title">{{$t('profit.date')}}</text>
					<text class="header-th-title">{{$t('profit.title')}}</text>
					<text class="header-th-title">{{$t('profit.remarks')}}</text>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="hb-table-body" v-if="tabIndex == 0">
				<view v-if="dataList.length > 0" class="hb-table-body-column record" v-for="item in dataList"
					:key="item.id">
					<text class="column-th">{{item.date}}</text>
					<text class="column-th">{{Number(item.phs)}}T</text>
					<text class="column-th">{{Number(item.amount)}}{{coin}}</text>
					<text class="column-th"
						:class="[item.status == 2 ? 'succeed' : 'no-settlement']">{{item.status_str}}</text>
				</view>
			</view>
			<view class="hb-table-body" v-if="tabIndex == 1">
				<view v-if="dataList.length > 0" class="hb-table-body-column record1" v-for="item in dataList"
					:key="item.id">
					<text class="column-th grant-column-th">{{item.date}}</text>
					<text class="column-th grant-column-th succeed">{{Number(item.amount)}}{{coin}}</text> 
					<text class="column-th grant-column-th">{{$t('info.settlement')}}</text>
				</view>
			</view>
			<uniLoadMore :loadingType="loadingType" :contentText="contentText"  style="margin-bottom:390rpx;margin-top: 30rpx;"></uniLoadMore>
		</view>
	</view>
</template>

<script>
	import HbPopTip from "@/components/hb-pop-tip";
	import HbTable from "@/components/hb-table";
	import base64Code from '@/plugin/base64code';
	import uniLoadMore from '@/components/uni-load-more.vue';
	import {
		markPrice
	} from '@/api/wallet'
	import {
		Profit,
		MiningRecords,
		PayedRecords
	} from '@/api/profit'
	export default {
		data() {
			return {
				tabIndex: 0,
				form: {
					status: 0,
				},
				coin: 'BTC',
				data: {},
				dataList: [],
				page: 1,
				page1: 1,
				loadingType: 0,
				current: 0,
				tab: [{
						val: "0",
						coin: "FIL"
					},
					{
						val: "1",
						coin: "BTC"
					},
					{
						val: "2",
						coin: "ETH"
					}
				],
				earningTabIndex: 0,
				BalanceData: {}, 
			}
		},
		onShow() {
			this.getProfit()
			this.getmarkPrice()
		},
		created() {
			this.getList()
		},
		computed: {
			contentText() {
				return {
					contentdown: this.$t('info.contentText.contentdown'),
					contentrefresh: this.$t('info.contentText.contentrefresh'),
					contentnomore: this.$t('info.contentText.contentnomore')
				}
			}
		},
		methods: {
			onEarningTab(index) {
				this.earningTabIndex = index;
			},
			changeTab(e) {
				this.current = e
				this.earningTabIndex = 0
				this.tabIndex = 0
				this.coin = this.tab[e].coin
				this.getProfit()
				this.getmarkPrice()
				this.onReset();
			},
			getmarkPrice() {
				var time = Math.round(new Date().getTime() / 1000);
				var data = {
					coin: base64Code.adds(time, this.coin),
					time: time
				}
				markPrice(data).then(res => {
					this.uCoinPrice = res.data
				})
			},
			getProfit() {
				var time = Math.round(new Date().getTime() / 1000);
				var data = {
					coin: base64Code.adds(time, this.coin),
					time: time
				}
				Profit(data).then(res => {
					this.BalanceData = res.data
				})
			},
			getList(bol) {
				if (this.loadingType == 3) {
					return false
				}
				this.loadingType = 1;
				this.getMiningRecords(bol);
			},
			onScreening(key) {
				this.form.status = key;
			},
			onTab(index) {
				if (this.tabIndex != index) {
					this.tabIndex = index;
					this.onReset();
				}
			},
			getMiningRecords(bol) {
				this.loadingType = 1;
				var time = Math.round(new Date().getTime() / 1000);
				var data = {
					page: base64Code.adds(time, this.page),
					coin: base64Code.adds(time, this.coin),
					time: time
				}
				MiningRecords(data).then(res => {
					if (res.code = '1000') {
						if (bol) {
							this.dataList = [];
						}
						this.total = res.data.total
						let arr = res.data.model;
						this.dataList.push(...arr)
					} else {
						this.loadingType = 3
						this.dataList = [];
					}
				}).catch(() => {
					this.loadingType = 3
					this.dataList = [];
					uni.stopPullDownRefresh();
				})
			},
			getPayedRecords(bol) {
				this.loadingType = 1;
				var time = Math.round(new Date().getTime() / 1000);
				var data = {
					page: base64Code.adds(time, this.page1),
					coin: base64Code.adds(time, this.coin),
					time: time
				}
				PayedRecords(data).then(res => {
					if (res.code = '1000') {
						if (bol) {
							this.dataList = [];
						}
						this.total = res.data.total
						let arr = res.data.model;
						this.dataList.push(...arr)
					} else {
						this.loadingType = 3
						this.dataList = [];
					}
				}).catch(() => {
					this.loadingType = 3
					this.dataList = [];
				})
			},
			onPullDownRefresh() {
				this.page = 1;
				this.page1 = 1;
				this.loadingType = 0;
				this.getList(true);
			},
			onReachBottom() {
				if (this.loadingType !== 0) {
					return
				}
				this.getList();
			}
		}
	}
</script>

<style scoped lang="scss">
	.uni-status-bar {
	  width: 100%;
	  height: var(--status-bar-height);
	  background:rgba(255,255,255,255);
	  position: sticky;
	  left: 0;
	  top:0;
	}
	.fixed {
		width: 100%;
		// height:514rpx;
		position: sticky;
		left: 0;
		top:0;
		background: #fff;
		/*  #ifdef  APP-PLUS  */
		// height:494rpx;
		top: var(--status-bar-height);
		// padding-top:88rpx;
		/*  #endif  */
	}
    .bottom{
		// margin-top:612rpx;
		// height:70vh;
		// margin-bottom: 60rpx;
	}
	.overview {
		padding: 32rpx 32rpx 0;

		// background: $hb-bg;
		// margin-bottom: 48rpx;
		.bg_tab1 {
			// padding: 2rpx 0 16rpx;
		}

		.tabCoin {
			display: flex;
			align-items: center;
			// padding:32rpx;
			width: 420rpx;
			height: 80rpx;
			// background: rgba(232, 233, 235, 1);
			// border-radius: 40rpx;

			.item {
				// flex: 1;
				width: 140rpx;
				font-size: 28rpx;
				color: rgba(97, 99, 111, 1);
				align-items: center;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				// margin-right: 54rpx;
				font-family: HarmonyOS_Sans_SC_Medium;
				// padding: 16rpx 0;

				&.active {
					color: $hb-primary-color;
					position: relative;
					background: #fff;
					box-shadow: 0px 0px 6px rgba(126, 126, 128, 0.2);
					border-radius: 80rpx;
				}
			}
		}

		.title {
			font-size: 44rpx;
			font-family: HarmonyOS_Sans_SC_Bold;
			padding-bottom: 32rpx;
		}
	}

	.cardAmount {
		background: url(@/static/profit/profitbg.png)no-repeat;
		background-size: cover;
	}

	.tab {
		padding:10rpx 62rpx 0;
		background: $hb-bg;

		.item {
			width: 300rpx;
			background: rgba(233, 234, 236, 1);
			padding:16rpx 0;
			text-align: center;
			border-top: 4rpx solid rgba(0, 0, 0, 0);
			border-radius: 8rpx 8rpx 0 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size:32rpx;

			image {
				display: inline-block;
				margin-right: 10rpx;
				background: 0;
				opacity: 0.6;
				width:40rpx;
				height:40rpx;
			}

			&.active {
				color: $hb-primary-color;
				background: #fff;
				border-top: 4rpx solid $hb-primary-color;

				image {
					opacity: 1;
				}
			}
		}
	}

	.select {

		.hb-pop-tip .pop-tip-content {
			left: 0 !important;
		}

		.text {
			font-size: 26rpx;
			color: $hb-red;
		}
	}

	.record {
		text-align: center;

		text {
			&:first-child {
				padding-left: 32rpx;
				text-align: left;
			}

			&:last-child {
				text-align: right;
				min-width: 100rpx;
				flex: none;
				padding-right: 32rpx;
			}
		}
	}

	.record1 {
		padding: 0 32rpx;
		text-align: center;

		text {
			&:first-child {
				text-align: left;
				padding-left: 32rpx;
			}

			&:last-child {
				text-align: right;
				padding-right: 32rpx;
			}
		}
	}

	.header-th {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding:16rpx 0 16rpx;
		border-top: .5px solid $hb-line-color;
		text-align: center;
		border-bottom: .5px solid $hb-line-color;

		.header-th-title {
			flex: 1;
			color: $hb-text-black-color;
			font-size: 28rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.hb-table-body-column {
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		border-top: .5px solid $hb-line-color;
        &:first-child{
			border:0
		}
		.column-th {
			flex: 1;
			color: $hb-text-gray-color;
			font-size: 28rpx;
		}
	}

	// 收益
	.earnings-content {
		background: #fff;
		// margin-top: -1PX;
		// padding-left: 20rpx;
		// padding-right: 32rpx;
		// margin-bottom: 16rpx;

		.earnings-tabs {
			position: relative;
			display: flex;
			align-items: center;

			&:after {
				position: absolute;
				bottom: 0;
				right: 0;
				content: '';
				display: block;
				height: 1PX;
				width: 98%;
				background: #4C516E;
			}

			// .earnings-tab-first {
			// 	margin-left: 40rpx;
			// }

			.earnings-tab-center {
				margin: 0 80rpx;
			}

			.earnings-tab-item {
				padding:34rpx 0 24rpx;
				position: relative;
				width: 25%;

				&.noFIL {
					width: 50%;
				}

				&-image {
					display: block;
					width: 80rpx;
					height: 56rpx;
					margin: 0 auto;
				}

				&-text {
					display: block;
					text-align: center;
					color: $hb-text-color;
					font-size: 26rpx;
					margin-top: 12rpx;
				}

				&-selected {
					width: 18px;
					height: 9px;
					position: absolute;
					z-index: 9;
					left: 50%;
					bottom: 0;
					margin-left: -9px;
					background: #fff;
				}
			}

			.earnings-tab-active {}
		}

		.earnings-tab-content {
			padding:34rpx 0;

			.earnings-content-item {
				text-align: center;

				&-amount {
					color: $hb-title-color;
					font-size: 36rpx;
					font-family: HarmonyOS_Sans_SC_Medium;

					.amount {}

					.unit {}
				}

				&-title {
					position: relative;
					display: flex;
					align-items: first;
					justify-content: center;
					margin-top: 14rpx;

					.label {
						color: $hb-text-gray-color;
						font-size: 26rpx;
					}

					.instructions {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
		}

		&-flex {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.flex-item {
				flex: 1;
			}
		}

		.earnings-coin-wrap {
			.earnings-coin-text {
				flex: 1;
				text-align: center;
				font-size: 42rpx;
				line-height: normal;
				font-weight: bold;
				color: $hb-title-color;
			}
		}
	}
</style>
